<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>My JSP 'demo.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<link rel="stylesheet" type="text/css" href="bootstrap/css/bootstrap.min.css">
	<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="bootstrap/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/demo/demo.js"></script>

<style type="text/css">
#header {
	position: fixed;
	z-index: 5;
	width:100%;
	height: 50px;
	border-top: 1px solid #D3D3D3;
	border-bottom: 1px solid #D3D3D3;
	background-color: #F3F3F3;
	line-height: 50px;
	text-align: center;
}
#temp {
	width:100%;
	height: 50px;
}
</style>
  </head>
  <body>
  <div id="header" class="">
  	<b>header</b>
  </div>
  <div id="temp"></div>
  <div style="width:50%;display: block;margin-left: auto;margin-right: auto;">
  	
   	<div id="alert">
   		<div class="alert alert-success">alert-success</div>
   		<div class="alert alert-warning"><b>alert-warning</b></div>
   		<div class="alert alert-warning alert-dismissable">
  			<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
   			<strong>alert alert-warning alert-dismissable</strong>
   		</div>
   		<div class="alert alert-success">
   			<a href="" class="alert-link">alert-link</a>
   			<span class="alert alert-danger">span alert-danger</span>
   		</div>
   		<div class="alert alert-success">
   			<a href="" class="alert-link">alert-link</a>
   			<div class="alert alert-info">div swaper</div>
   			<div class="alert alert-danger alert-dismissable">
   				<button type="button" class="close" data-dismiss="alert" aria-hidden="true">&times;</button>
   				<a href="" class="alert-link">link</a>
   			</div>
   		</div>
   	</div>
   	<div id="list-group">
   		<div id="list-group-1">
	   		<ul class="list-group">
	   			<li class="list-group-item">
	   				<span class="badge">15</span>
	   				demosadlfk
	   			</li>
	   			<li class="list-group-item">
	   				<span class="badge">16</span>
	   				fasdgasdg
	   			</li>
	   			<li class="list-group-item">
	   				<span class="badge">17</span>
	   				fasdgasdg
	   			</li>
	   		</ul>
   		</div>
   		<div id="list-group-2">
   			<div class="list-group">
   				<a href="" class="list-group-item active">a list-grout-item active</a>
   				<a href="" class="list-group-item">sdfasdf</a>
   				<a href="" class="list-group-item">sdfasdf</a>
   				<a href="" class="list-group-item">sdfasdf</a>
   			</div>
   		</div>
   		<div id="list-group-3">
   			<ul class="list-group">
	   			<li class="list-group-item">
	   				<span class="badge">15</span>
	   				fasdgasdg
	   				<ul class="list-group">
	   					<li class="list-group-item">
			   				<span class="badge">16</span>
			   				fasdgasdg
			   			</li>
			   			<li class="list-group-item">
			   				<span class="badge">16</span>
			   				fasdgasdg
			   			</li>
			   			<li class="list-group-item">
			   				<span class="badge">16</span>
			   				fasdgasdg
			   			</li>
	   				</ul>
	   			</li>
	   			<li class="list-group-item">
	   				<span class="badge">16</span>
	   				fasdgasdg
	   			</li>
	   			<li class="list-group-item">
	   				<span class="badge">17</span>
	   				fasdgasdg
	   			</li>
	   		</ul>
   		</div>
   		<div id="list-group-4">
   			<div class="list-group">
   				<a href="" class="list-group-item active">
   					<h4 class="list-group-item-heading">list head test</h4>
   					<p class="list-group-item-text">this is first p</p>
   					<p class="list-group-item-text">this is first p</p>
   				</a>
   				<a href="" class="list-group-item">
   					<h4 class="list-group-item-heading">list head test</h4>
   					<p class="list-group-item-text">this is first p</p>
   					<p class="list-group-item-text">this is first p</p>
   				</a>
   				<a href="" class="list-group-item">
   					<h4 class="list-group-item-heading">list head test</h4>
   					<p class="list-group-item-text">this is first p</p>
   					<p class="list-group-item-text">this is first p</p>
   				</a>
   			</div>
   		</div>
   	</div>
   	<div id="panel">
   		<div class="panel panel-default">
   			<div class="panel-heading">
   				panel-heading....
   			</div>
   			<div class="panel-body">
   				<div class="pull-left" style="width:140px;height:140px;border:1px solid gray;margin-right:5px;">panel-body...</div>
   				<div class="pull-left" style="width:140px;height:140px;border:1px solid gray;margin-right:5px;">panel-body...</div>
   			</div>
   			<div class="panel-footer">
   				this is footer
   			</div>
   		</div>
   		<div class="panel panel-default">
   			<div class="panel-heading wrap">
   				<b>XX管理</b>
   			</div>
   			<!-- <div class="panel-body"></div> -->
   			<div class="list-group">
   				<a href="" class="list-group-item">
   					<span class="list-group-item-heading">list head test</span>
   				</a>
   				<a href="" class="list-group-item active">
   					<span class="list-group-item-heading">list head test</span>
   				</a>
   				<a href="" class="list-group-item">
   					<span class="list-group-item-heading">list head test</span>
   				</a>
   			</div>
   		</div>
   	</div>
   	<div id="well">
   		<div class="well">well xiaoguo</div>
   		<div class="well well-sm">well small</div>
   	</div>
   	<div class="panel panel-default">
   		<div class="panel-heading">
   			this is head
   		</div>
   		<div class="panel-body">
   			<div id="tip-window" style="width:270px;height:180px;border:1px solid #CDCDCD;">
   				<div id="tip-toolbar" style="width:100%;height:33px;line-height:33px;padding: 0 5px;background: #F2F2F2;border-bottom:1px solid #CDCDCD;">
   					<div style="float: left;"><b>今日头条</b></div>
   					<div style="float: right;"><a href="javascript:$('#tip-window').fadeOut(500);" style="color: black;">关闭</a></div>
   				</div>
   				<div id="tip-content" style="margin:10px;padding-bottom:10px;border-bottom:1px dashed #CDCDCD;">
   					<div id="title"><a href="#"><b>码农与农民工 真正的区别</b></a></div>
   					<div id="title-content" style="margin-top:5px;color: gray;">农民工可以技术基本更新很少、 码农每三年就更新下技术，刚刚熟练上手尼玛又要学习新技术！</div>
   				</div>
   				<div id="tip-bottom" style="float:right;padding:0 5px 10px 0;">
   					<a href="#">查看»</a>
   				</div>
   			</div>
   		</div>
   	</div>
  </div>
  
  <!-- 右下角提示窗口 -->
  <div id="tip-window-right" style="position:fixed;z-index:10;right:10px;bottom:10px;;width:270px;height:180px;border:1px solid #CDCDCD;">
		<div id="tip-toolbar" style="width:100%;height:33px;line-height:33px;padding: 0 5px;background: #F2F2F2;border-bottom:1px solid #CDCDCD;">
			<div style="float: left;"><b>今日头条</b></div>
			<div style="float: right;">
				<a href="javascript:$('#tip-window-right').fadeOut(500);" style="color: black;">关闭</a>
			</div>
		</div>
		<div id="tip-content" style="margin:10px;padding-bottom:10px;border-bottom:1px dashed #CDCDCD;">
			<div id="title">
				<a href="#"><b>码农与农民工 真正的区别</b></a>
			</div>
			<div id="title-content" style="margin-top:5px;color: gray;">
				农民工可以技术基本更新很少、码农每三年就更新下技术，刚刚熟练上手尼玛又要学习新技术！
			</div>
		</div>
		<div id="tip-bottom" style="float:right;padding:0 5px 10px 0;">
			<a href="#">查看»</a>
		</div>
	</div>
  </body>
</html>
